import React, { Component } from 'react'
import {Route,Switch} from 'react-router-dom'
import './App.css'
import Home from './pages/Home'
import About from './pages/About'
import MyNavLink from './components/MyNavLink'
import Header from './components/Header'
/* 
   这一小节其实讲的东西比较细，是之前留下来的一个小坑，就是css的引入方式
   当我们使用BrowerRouter，且使用到了二级路由之后，那么在二级路由的path下在浏览器进行刷新
   我们之前引入的bootstrap样式就会失效，原因很简单，就是我们引入的方式是'./xxx'这种相对路径的形式
   所以刷新页面时，会在一级路径(比如：localhost:3000/home/css/bootstrap.css)在进行资源的查找。这自然是找不到的
   解决的方法有三个：
   (1) css样式使用根路径来定位，比如 /css/bootstrap.css
   (2) 使用react脚手架中的 %PUBLIC_URL% 来指定css样式的存放路径
   (3) 使用 HashRouter 作为路由器
*/
export default class App extends Component {


    render() {
        return (
            <div>
                <div className="row">
                    <Header/>
                </div>
                <div className="row">
                    <div className="col-xs-2 col-xs-offset-2">
                        <div className="list-group">
                            {/* 
                            使用Link标签代替 a 标签，这一步是用于实现第一步：浏览器URL的变更
                            */}
                            <MyNavLink to="/about/test">About</MyNavLink>
                            <MyNavLink to="/home/test">Home</MyNavLink>
                        </div>
                    </div>
                    <div className="col-xs-6">
                        <div className="panel">
                            <div className="panel-body">
                                {/* 
                                在App.js中，定义路由，路由规定了path对应跳转的组件
                                 当路由中出现了2个或者2个以上的path同时匹配的情况，那么实际上
                                 对应的路由组件都会被渲染。如果我们想要说只渲染(挂载)第一个匹配
                                 上的组件的话，那么我们可以使用<Switch>组件来解决
                                */}
                                <Switch>
                                <Route path="/about/test" component={About}/>
                                <Route path="/home/test" component={Home}/>
                                </Switch>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
